<template>
  <q-dialog class="dialog" v-model="show" persistent>
    <q-card style="min-width: 400px">
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">{{state === 'add' ? '添加企业' : '编辑企业'}}</div>
      </q-card-section>
      <q-form @submit="submit" class="q-gutter-md dialog-content">
        <q-card-section>
          <q-input v-model="name" autofocus outlined dense
                   :rules="[val => val && val.length > 0 || '请填写企业名称']">
            <template v-slot:before>
              <label class="text-right name"><span class="text-red">*</span> 企业名称:</label>
            </template>
          </q-input>
          <q-input v-model="account" outlined dense
                   :rules="[ val => val && /^[1][3,4,5,7,8,9][0-9]{9}$/.test(val) || '请输入正确的手机号']">
            <template v-slot:before>
              <label class="text-right name"><span class="text-red">*</span> 管理员账户:</label>
            </template>
          </q-input>
          <q-input v-model="email" outlined dense
                   :rules="[val => val && val.length > 0 || '请填写邮箱',
                      val => /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(val) || '请填写正确的邮箱'
                   ]">
            <template v-slot:before>
              <label class="text-right name"><span class="text-red">*</span> 邮箱:</label>
            </template>
          </q-input>
          <q-select v-model="status" outlined dense :rules="[]" :options="statusOptions">
            <template v-slot:before>
              <label class="text-right name"><span class="text-red">*</span> 状态:</label>
            </template>
          </q-select>
          <q-input v-model="legal" outlined dense :rules="[]">
            <template v-slot:before>
              <label class="text-right name">法人:</label>
            </template>
          </q-input>
          <q-input v-model="remark" outlined type="textarea" counter autogrow maxlength="200">
            <template v-slot:before>
              <label class="text-right name">备注:</label>
            </template>
          </q-input>
        </q-card-section>
        <q-separator />
        <q-card-actions align="center" class="dialog-footer text-center margin-t-10">
          <q-btn outline color="primary" label="取消" @click="hideDialog" class="q-mr-md"/>
          <q-btn unelevated color="primary" label="确认" type="submit" :loading="submitting"/>
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'company-dialog',
  props: {
    // 状态列表
    statusOptions: {
      type: Array
    }
  },
  data () {
    return {
      show: false,
      // 分为编辑状态和添加状态 'edit' or 'add'
      state: 'edit',
      name: '', // 企业名称
      account: '', // 管理员账户
      email: '', // 邮箱
      status: '', // 状态
      legal: '', // 法人
      remark: '', // 备注
      id: null, // 企业id
      submitting: false // 提交状态
    }
  },
  created () {
  },
  methods: {
    showDialog (state, item) {
      this.initInfo(state, item)
      this.show = true
    },
    hideDialog () {
      this.show = false
    },
    initInfo (state, info) {
      this.state = state
      if (state === 'edit') {
        this.name = info.name
        this.account = info.administrator
        this.email = info.email
        this.status = {
          value: info.statusValue,
          label: info.statusLabel
        }
        this.legal = info.legalPerson
        this.remark = info.remark
        this.id = info.id
      } else {
        this.name = ''
        this.account = ''
        this.email = ''
        this.status = this.statusOptions[1]
        this.legal = ''
        this.remark = ''
        this.id = null
      }
    },
    submit () {
      const data = {
        companyName: this.name,
        administrator: this.account,
        email: this.email,
        status: this.status.value,
        legalPerson: this.legal,
        remark: this.remark
      }

      this.submitting = true
      if (this.state === 'edit') {
        this.$emit('submit', data, this.id)
      } else {
        this.$emit('submit', data)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .dialog-content{
    .name{
      font-size 16px
      display inline-block
      width 96px
    }
  }
</style>
